import React, { useEffect,useMemo } from 'react';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import './index.d'
import zhCN from 'antd/es/locale/zh_CN';
import { RouterProvider, createHashRouter, createBrowserRouter, useRoutes, useLocation, useNavigate } from 'react-router-dom'
import routerList from './router/index'
import { ConfigProvider } from 'antd';
import { routerPathStort } from './redux/store'
import Login from './components/ivform/login'
import pubsub from 'pubsub-js';
import auth from './utils/auth';
dayjs.locale('zh-cn');
// createHashRouter==哈希模式
// createBrowserRouter histy模式
const router = createHashRouter(routerList)
// 路由重定向
const App: React.FC<any> = () => {
  const loactionn = useLocation()
  const navigate = useNavigate()
  const homeSidebarArr = []
  // 实现路由守卫
  useEffect(() => {

    const key = loactionn.pathname.split('/')
    key.shift()
    key.shift()
    let pathKey = {
      meta: {
        title: ''
      },
      path: '',
      name: '',
      permission: []
    }
    pathKey = homeSidebarArr.filter(val => {
      const key2 = val.path.split('/')

      if (key2.length === key.length) {
        return key.includes(val.name)

      }
    })[0]


    if (!auth.verifyPermission(pathKey?.permission)) {
      navigate('/505')
      return
    }

    const param = {

      label: pathKey?.meta?.title,

      key: pathKey?.name,

      path: pathKey?.path,
    }
    routerPathStort.dispatch({ type: 'add', data: param })
    // pubsub.publish('RouterParam', param)
    return () => {
      routerPathStort.dispatch({ type: 'add', data: param })

    }

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [loactionn.pathname, loactionn.state])

  // 获取树的整个数组
  depThree(routerList)

  function depThree(homeSidebar: any[]) {

    homeSidebar.map(val => {

      homeSidebarArr.push(val)

      if (val.children) {

        depThree(val.children)

      }

    })

  }

  return (

    <div>

      <ConfigProvider locale={zhCN}>
        {useRoutes(routerList)}
      </ConfigProvider>


    </div>

  )
  // 路由的第二种用法
  // return (
  //   <div className='app' >
  //       <Suspense fallback={<Login></Login>}>
  //   {/* 国际化 去掉则为英文 */}
  //     <ConfigProvider locale={zhCN}> 
  //             <RouterProvider router={router}></RouterProvider>
  //     </ConfigProvider>
  // </Suspense>
  //   </div>
  // )
}
export default App;
